@charset "UTF-8";
// 清除浮动
@mixin clearfix() {
  *zoom: 1;
  &:after {
    display: block;
    clear: both;
    content: "";
    height: 0;
    visibility: hidden;
  }
}

// 省略号
@mixin ellipsis($line:1){
  @if $line==1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @else {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 箭头  arrow(direction,size,color);
@mixin arrow($direction,$size,$color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: $size;
  cursor: pointer;
  @if $direction == top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  }
  @else if $direction == bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  }
  @else if $direction == right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  }
  @else if $direction == left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}

// retina背景图
@mixin bgimage($image){
  background: url('../images/' + $image + '.png');
  background-image: -webkit-image-set(url('../images/' + $image + '.png') 1x,url('../images/' + $image + '@2x' + '.png') 2x);
  background-image: image-set(url('../images/' + $image + '.png') 1x,url('../images/' + $image + '@2x' + '.png') 2x);
}

// 文字阴影
@mixin text-shadow($h-shadow:0px, $v-shadow:2px, $blur:3px, $color:rgba(0,0,0,0.15)) {
  text-shadow: $h-shadow $v-shadow $blur $color;
}

//盒阴影
@mixin shadow(){
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

// 自定义滚动条
@mixin scrollBar($width:10px,$height:10px,$outColor:#fff,$innerColor:#d3d3d3,$radius:5px,$shadow:null) {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    background-color: $outColor;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }
    @if ($radius!=null) {
      border-radius: $radius;
    }
    background-color: $outColor;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }
    @if ($radius!=null) {
      border-radius: $radius;
    }
    background-color: $innerColor;
    border: 1px solid $innerColor;
  }
}




// background-image: url(../images/arw.png);
// background-image: -webkit-image-set(url(../images/arw.png) 1x,url(../images/arw@2x.png) 2x);
// background-image: image-set(url(../images/arw.png) 1x,url(../images/arw@2x.png) 2x);

// .bg-image {
//   @include imgRetina(images/waterlily, jpg, 200px, 200px, no-repeat, center);
//   height: 200px;
//   width: 200px;
// }
